<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>

<!--
此处通过使用 form标签 的 "onsubmit" 事件属性，实现事件与函数的绑定。
当表单提交事件触发时，将执行函数进行验证，如果返回true则正常提交表单，如果返回false则取消表单提交。
-->
<form action="" method="post" onsubmit="return form_submit()">
    <h1>用户注册</h1>

    <label for="input-username">用户名</label>
    <input type="text" name="username" id="input-username" required>
    <br/>

    <label for="input-password">密码</label>
    <input type="password" name="password" id="input-password" required>
    <br/>

    <button type="submit">注册</button>
</form>

<script>
    function form_submit() {
        let input_username = document.getElementById('input-username');
        let input_password = document.getElementById('input-password');

        if (input_username.value.length < 5) {
            alert('用户名长度不能小于5');
            return false;
        }
        if (input_password.value.length < 8) {
            alert('密码长度不能小于8');
            return false;
        }

        return true;
    }
</script>

<!-- <script src="static/xxx.js"></script> -->
</body>
</html>